<template lang="pug">
.list
  .list-header
    .list-header-tabs
      el-radio-group(size="small" v-model="tabActive" @change="changeRadio")
        el-radio-button(v-for="item in tabs", :label="item.value") {{item.label}}
    .list-header-filter
      header-filter(:filter="filter")
  .list-body
    .list-body-handles
      .list-filter
        el-button(size="small", :name="$route.query.status ? 'primary' : ''", :type="$route.query.status ? '' : 'primary'" @click="changeStatus('')") 全部({{total}})
        el-button(size="small", :name="$route.query.status == 2 ? '' : 'primary'", :type="$route.query.status == 2 ? 'primary' : ''" @click="changeStatus('2')") 未读({{unReadCount}})
        el-button(size="small", :name="$route.query.status == 1 ? '' : 'primary'", :type="$route.query.status == 1 ? 'primary' : ''" @click="changeStatus('1')") 已读({{AlreadyReadCount}})
      .list-btn
        el-button(size="small" @click="batchReady") 全部标记为已读
    .list-table
      el-table(
        :data="list"
        style="width: 100%"
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
        @row-click="rowClick"
      )
        el-table-column(type="selection" align="center" width="55px")
        el-table-column(label="消息类型" prop="title")
        el-table-column(label="内容" prop="detail" min-with="300")
        el-table-column(label="时间" prop="createDate" width="200")
      .index-pagination
        .pagination-total 共 64 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        )
  message-dialog(:show="showDialog", :item="currentItem" @close="closeDialog")
  notice-dialog(:show="showNoticeDialog", :item="currentItem" @close="closeDialog")
</template>

<script>
import headerFilter from '@/components/headerFilter'
import messageDialog from '@/components/modal/messageDialog'
import noticeDialog from '@/components/modal/noticeDialog'
import { getMessageList, setMessageRead } from 'api'
export default {
  name: 'noticeList',
  components: {
    headerFilter,
    messageDialog,
    noticeDialog
  },
  data () {
    return {
      tabActive: '',
      showDialog: false,
      showNoticeDialog: false,
      currentItem: {},
      tabs: [
        { label: '全部通知', value: '' },
        { label: '入册通知', value: 2 },
        { label: '收藏通知', value: 4 },
        { label: '样品通知', value: 3 },
        { label: '系统通知', value: 1 }
      ],
      filter: [
        [
          {
            name: '搜索：',
            type: 'default',
            key: 'searchContent',
            searchContent: '',
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      AlreadyReadCount: 0,
      unReadCount: 0,
      total: 0,
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    changeRadio (value) {
      let query = { ...this.$route.query, currentPage: 1 }
      delete query.type
      if (value) query.type = value
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    changeStatus (status = '') {
      let query = { ...this.$route.query, currentPage: 1 }
      delete query.status
      if (status) query.status = status
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    closeDialog () {
      this.currentItem = {}
      this.showDialog = false
      this.showNoticeDialog = false
    },
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      delete query.type
      if (this.tabActive) query.type = this.tabActive
      delete query.status
      if (this.$route.query.status) query.status = this.$route.query.status
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      let query = {}
      delete query.type
      if (this.tabActive) query.type = this.tabActive
      delete query.status
      if (this.$route.query.status) query.status = this.$route.query.status
      this.$router.replace({ name: this.$route.name, query: { ...query } })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    batchReady () {
      this.$confirm('是否要全部标记为已读？', '提示').then(async () => {
        try {
          await this.$axios.post(setMessageRead)
          this.$message.success('标记成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async rowClick (row, column, event) {
      try {
        this.currentItem = row
        if (row.type === 5) {
          this.showNoticeDialog = true
        } else {
          this.showDialog = true
        }
        if (row.status === 2) {
          await this.$axios.post(setMessageRead, { content: { messageId: row.messageId } })
          this.getList()
        }
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getMessageList, { content: { ...query } })
        this.page = parseInt(this.$route.query.currentPage)
        this.list = ResultSet.userData.messageList
        this.total = ResultSet.userData.allCount
        this.AlreadyReadCount = ResultSet.userData.AlreadyReadCount
        this.unReadCount = ResultSet.userData.unReadCount
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
} 
</script>

<style lang="scss" scoped>
.list {
  padding: 0 32px 16px;
}
.list-header {
  padding: 32px 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-header-filter {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #CBCBCB;
}
.list-body {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-body-handles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-table {
  margin-top: 16px;
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
</style>
